<template>
    <div>
      <table
        border="1"
        bordercolor="#20f3e8"
        cellspacing="0"
        style="width: 600px; height: 50px; text-align: center"
      >
        <thead>
          <tr>
            <th>商品</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
          <tr v-for="(arr1, index) in arr2" :key="index">
            <td>{{ arr1.name }}</td>
            <td>{{ arr1.num }}</td>
            <td>{{ arr1.shu }}</td>
            <td><button>删除</button></td>
          </tr>
        </thead>
      </table>
      <f11 :arr="arr"  @sss="acc"></f11>
    </div>
  </template>
  <script>
  import f11 from "./分页器.vue";
  export default {
    props: ["arr"],
    data() {
      return {
        // 条数
        shu1: this.arr[0].num1,
        arr2: [],
      };
    },
    created() {},
    watch: {
      arr: {
        handler() {
          this.arr2 = [...this.arr.slice(0, this.arr[0].num1)];
        },
        immediate: true, //一进入页面就执行handler里的代码
        deep: true,
      },
    },
    computed: {},
    components: {
      f11,
    },
    methods: {
      acc(val) {
          this.arr2=[...val]
      },
    },
  };
  </script>
  <style lang='less' scoped>
  </style>
  